/**
 * MineAdmin is committed to providing solutions for quickly building web applications
 * Please view the LICENSE file that was distributed with this source code,
 * For the full copyright and license information.
 * Thank you very much for using MineAdmin.
 *
 * @Author X.Mo<root@imoi.cn>
 * @Link   https://github.com/mineadmin
 */
import { CourseTaskVo } from "@/modules/course/api/task";
import type { MaFormItem } from "@mineadmin/form";
//@ts-ignore
import RemoteSelect from "@/components/ma-remote-select/index.vue";
//@ts-ignore
import TaskType from "../components/taslType.vue";
//@ts-ignore
import TaskInfo from "../components/taskInfo.vue";
//@ts-ignore
import Extras from "../components/extras/index.vue";
import { page as coursePage, CourseVo } from "@/modules/course/api/manage";
import {
  page as sectionPage,
  CourseSectionVo,
} from "@/modules/course/api/section";
import { ElTreeSelect } from "element-plus";
export default function getFormItems(
  formType: "add" | "edit" = "add",
  t: any,
  model: CourseTaskVo
): MaFormItem[] {
  if (formType === "add") {
    model.taskable_type = "task_image_text";
    // model.taskable_type = "task_micro_course";
    model.taskable_id = 0;
  }
  const sections = ref([]);
  const courses = ref<any>([]);
  coursePage({ page_size: 999, with: ["sections"] }).then((response) => {
    courses.value = response.data.list;
    sections.value =
      courses.value.find((c) => c.id == model.course_id)?.sections || [];
  });

  return [
    {
      label: () => t("course-manage.title"),
      prop: "course_id",
      render: () => (
        <el-tree-select
          data={courses.value}
          props={{ value: "id", label: "title" }}
          check-strictly={true}
          default-expand-all={true}
          clearable={true}
        />
      ),
      renderProps: {
        onChange(id) {
          sections.value =
            courses.value.find((c) => c.id == id)?.sections || [];
          model.section_id = undefined;
        },
        class: "w-full",
        placeholder: t("form.pleaseSelect", {
          msg: t("course-manage.title"),
        }),
      },
      cols: { md: 12 },
      itemProps: {
        rules: [
          {
            required: true,
            message: t("form.requiredSelect", {
              msg: t("course-manage.title"),
            }),
          },
        ],
      },
    },
    {
      label: () => t("course-section.title"),
      prop: "section_id",
      render: () => (
        <el-tree-select
          data={sections.value}
          props={{ value: "id", label: "name" }}
          check-strictly={true}
          default-expand-all={true}
          clearable={true}
        />
      ),
      renderProps: {
        class: "w-full",
        placeholder: t("form.pleaseSelect", {
          msg: t("course-section.title"),
        }),
      },
      cols: { md: 12 },
    },
    {
      label: () => t("course-task.taskable_type"),
      prop: "taskable_type",
      render: () => TaskType,
      renderProps: {
        row: model,
        setModel(key, val) {
          model[key] = val;
        },
      },
    },
    {
      label: () => t("course-task.task_set"),
      prop: "taskable",
      render: () => TaskInfo,
      renderProps: {
        data: model,
      },
    },
    {
      label: () => t("course-task.extras.title"),
      prop: "extras",
      render:()=>Extras,
      renderProps: {
        data: model,
      },
    },
    {
      label: () => t("course-task.is_publish"),
      prop: "is_publish",
      render: "switch",
      renderProps: {
        placeholder: t("form.pleaseInput", {
          msg: t("course-task.is_publish"),
        }),
        activeValue: 1,
        inactiveValue: 0,
      },
      itemProps: {
        rules: [
          {
            required: true,
            message: t("form.requiredInput", {
              msg: t("course-task.is_publish"),
            }),
          },
        ],
      },
    },
  ];
}
